<template>
	<a-modal :width="950" :visible="visible" title="视频文字" :mask-closable="false" @ok="handleOk" @cancel="handleClose" centered>
		<div class="main_con">
			<div id="phoneCon" class="left_phone_view" v-if="visible">
				<a-spin style="width:360px; height: 640px;" :spinning="loading">
					<DraggableContainer :style="resizableStyle" :referenceLineColor="'white'">
						<!-- 移动容器 -->
						<Vue3DraggableResizable v-show="item.name" v-for="(item, index) in wordList"
							:key="'art_con'+index" :initW="wordList[index].width" :initH="wordList[index].height"
							v-model:x="wordList[index].elLeft" v-model:y="wordList[index].elTop"
							v-model:w="wordList[index].width" v-model:h="wordList[index].height"
							v-model:active="wordList[index].active" :draggable="true" :resizable="false" :parent="true">
							<div :style="wordStyle(item, index)">
								<span :id="'art_con_'+index" >{{item.name}}</span>
							</div>
						</Vue3DraggableResizable>
					</DraggableContainer>
				</a-spin>
			</div>
			<div class="right_set_con" id="setCon">
				<div v-for="(card_item, card_index) in wordList" :key="card_index"
					class="form_item" style="align-items: flex-start;" :style="{marginTop: card_index == 1?'10px':''}">
					<div class="form_title">{{card_index == 0?'主标题':'副标题'}}</div>
					<div class="form_value" style="margin-top: 5px;">
						<a-input :maxlength="15" :placeholder="`请输入${card_index == 0?'主标题':'副标题'}`" style="width: 100%;" v-model:value="wordList[card_index].name" >
							<template #suffix>
								<div @click="deleteForm(card_index)" style="padding: 0;cursor: pointer; color: #ff5262;" type="link" v-if="card_index == 1">删除</div>
							</template>
						</a-input>
					</div>
				</div>
				<div class="add_btn" v-if="wordList.length<2">
					<a-button type="dashed" block @click="addForm">
						<template #icon>
							<PlusOutlined />
						</template>
						添加副标题
					</a-button>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		nextTick,
		computed
	} from 'vue';
	import {
		PlusOutlined,
	} from '@ant-design/icons-vue';
	import request from "../../../../../../common/utils/request";
	import {
		message
	} from 'ant-design-vue';
	import {
		DraggableContainer
	} from 'vue3-draggable-resizable';
	import Vue3DraggableResizable from 'vue3-draggable-resizable';
	import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
	import store from '@/store';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			wordObj: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {
			PlusOutlined,
			DraggableContainer,
			Vue3DraggableResizable,
		},
		setup(props, context) {
			const state = reactive({
				wordList: [],
				loading: false
			})
			const radioType = computed(()=>store.getters.clipJSON?.aspect_ratio)
			const resizableStyle = computed(() => {
				return {
					backgroundImage: `url(https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png), url(https://hf.pigcms.com/static/wxapp/images/phone_black_back.png)`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: '360px',
					height: radioType.value == '1:1'?'360px':radioType.value == '16:9'?'202.5px':'640px'
				}
			})
			const wordStyle = computed(() => {
				return function(item, index) {
					nextTick(()=>{
						let domObj = document.getElementById('art_con_'+index)
						state.wordList[index].width = 360
						state.wordList[index].height = domObj?.offsetHeight
					})
					let font_family = state.typefaceOptions.find(v => v.material_url == item.typeface)
						?.font_family
					return {
						'cursor': 'grab',
						'font-family': 'HappyZcool-2016',
						'font-size': item.font_size + 'px',
						'width': item.width + 'px',
						'height': item.height + 'px',
						'line-height': item.height + 'px',
						'color': item.color,
						'text-align': 'center',
						'white-space': 'nowrap'
					}
				}
			})

			const generateRandomString = () => {
				let randomString = '';
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				const charactersLength = characters.length;
				for (let i = 0; i < 6; i++) {
					randomString += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return randomString;
			}

			const handleOk = () => {
				let flag = false
				state.wordList.map(item => {
					if (!item.name) {
						flag = true
					}
					let font_family = state.typefaceOptions.find(v => v.material_url == item.typeface)
						?.font_family
					item.font_family = font_family
				})
				const obj = {
					name: props.wordObj.name ? props.wordObj.name : generateRandomString(),
					list: state.wordList
				}

				if (flag) {
					message.warn('请先完善文字信息')
					return
				}
				context.emit('close', obj)
			}

			const handleClose = () => {
				context.emit('close')
			}

			const addForm = () => {
				let material_url = state.typefaceOptions.find(item => item.name == '站酷快乐体').material_url
				state.wordList.push({
					width: 360,
					height: 50,
					font_size: 30,
					elLeft: 0, // 元素的左偏移量
					elTop: 0, // 元素的右偏移量
					color: '#FFF000',
					backgroundColor: '',
					name: ''
				})
				state.loading = true
				customFont('HappyZcool-2016', material_url)
			}

			const deleteForm = (index) => {
				if (state.wordList.length == 1) {
					message.warn('至少需要一个标题')
					return
				}
				state.wordList.splice(index, 1)
			}

			const getFontClass = () => {
				state.typefaceOptions = []
				request.get('/work_ai', '/user/shotstack/material/fonts/list').then(res => {
					res.result.map(item => {
						item.label = item.name
						item.value = item.material_url
						state.typefaceOptions.push(item)
					})
					if (!props.wordObj.list) {
						let material_url = state.typefaceOptions.find(item => item.name == '站酷快乐体')
							.material_url
						state.wordList = [{
							width: 360,
							height: 50,
							font_size: 30,
							elLeft: 0, // 元素的左偏移量
							elTop: 0, // 元素的右偏移量
							color: '#FFF000',
							backgroundColor: '',
							name: ''
						}]
						state.loading = true
						customFont('HappyZcool-2016', material_url)
					}
				})
			}

			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
					state.loading = false
				}).catch((error) => {
					console.error(error);
					state.loading = false
				});
			}
			
			watch(() => props.visible, val => {
				if (val) {
					getFontClass()
				}
				if (val && props.wordObj && props.wordObj.list?.length > 0) {
					state.wordList = JSON.parse(JSON.stringify(props.wordObj.list))
					state.loading = true
					state.wordList.map((item, index) => {
						customFont(item.font_family, item.typeface)
					})
				}
			})
			return {
				...toRefs(state),
				handleOk,
				addForm,
				handleClose,
				deleteForm,
				getFontClass,
				wordStyle,
				radioType,
				resizableStyle
			}
		}
	})
</script>

<style lang="less" scoped>
	.main_con {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left_phone_view {
			width: 360px;
			height: 640px;
			background-color: #000;
			background-image: url('https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center center;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.right_set_con {
			width: calc(100% - 370px);
			height: 640px;
			overflow-y: scroll;
			overflow-x: hidden;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.card_item {
				margin-top: 10px;

				&:nth-child(1) {
					margin-top: 0;
				}
			}

			.add_btn {
				bottom: 0;
				left: 0;
				margin-top: 10px;
			}
		}
	}
</style>